import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import Link from 'umi/link'
import { Divider, Card, List, Tag, Icon, Button  } from 'antd';
import { FormattedMessage } from 'umi/locale';
import E from 'wangeditor'

import ArticleListContent from './ArticleListContent';
import styles from './Articles.less';

const ButtonGroup = Button.Group

const editPath = '/articles/edit'
const draftPath = '/articles/draft'
const todoPath = '/articles/todo'
const publishPath = '/articles/publish'
const recyclePath = '/articles/recycle'

const pageSize = 5;

@connect(({ article, loading }) => ({
  article,
  loading: loading.models.list,
}))
class SearchList extends Component {
  constructor(props, context) {
      super(props, context);
      this.state = {
        editorContent: '',
      }
  }

  async componentDidMount() {
    const elem = this.refs.editorElem
    const editor = new E(elem)
    editor.create()
    editor.$textElem.attr('contenteditable', false)

    const { dispatch } = this.props;

    const { location: {query: { id } } } = this.props;
    if (id) {
      await dispatch({
        type: 'article/view',
        payload:  { id: Number(id) }
      });

      const { article: { record } } = this.props;
      editor.txt.html(record.notes)

    }
  }

  async workflow({ state, path}){
      const { dispatch, location: {query: { id } } } = this.props;
      await dispatch({
        type: 'article/write',
        payload:  { id: Number(id), vals: {state} }
      });
      this.props.history.push(path)
  }

  async send(){
    this.workflow({ state: 'todo', path: todoPath })
  }


  async publish(){
    this.workflow({ state: 'done', path: publishPath })
  }

  async del(){
    this.workflow({ state: 'cancelled', path: recyclePath })
  }

  async setDraft(){
    this.workflow({ state: 'draft', path: draftPath })
  }

  toEdit(){
    const {
      article: { record },
    } = this.props;
    this.props.history.push(`${editPath}?id=${record.id}`)

  }

  render() {
    const {
      article: { record },
      loading,
    } = this.props;

    const list = [record]

    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    const {state} = record

    return (
      <Fragment>

      <ButtonGroup>

        <button
          style={{display: ['draft','todo'].includes(state) ? 'block' : 'none'}}
          onClick={this.toEdit.bind(this)}
        >编辑</button>
        <button
          style={{display: ['draft','todo'].includes(state) ? 'block' : 'none'}}
          onClick={this.send.bind(this)}
        >送审</button>

        <button
          style={{display: ['todo'].includes(state) ? 'block' : 'none'}}
          onClick={this.publish.bind(this)}
        >发布</button>
        <button
          style={{display: ['draft','todo'].includes(state) ? 'block' : 'none'}}
          onClick={this.del.bind(this)}
        >删除</button>
        <button
          style={{display: ['cancelled'].includes(state) ? 'block' : 'none'}}
          onClick={this.setDraft.bind(this)}
        >置为草稿</button>

      </ButtonGroup>


        <Card
          style={{ marginTop: 24 }}
          bordered={false}
          bodyStyle={{ padding: '8px 32px 32px 32px' }}
        >

          <List
            size="large"
            loading={list.length === 0 ? loading : false}
            rowKey="id"
            itemLayout="vertical"
            dataSource={list}
            renderItem={item => (
              <List.Item
                key={item.id}
                actions={[
                  <IconText type="star-o" text={item.star} />,
                  <IconText type="like-o" text={item.like} />,
                  <IconText type="message" text={item.message} />,
                ]}
                extra={<div className={styles.listItemExtra} />}
              >
                <List.Item.Meta
                  title={item.title}
                  description={
                    <span>
                      {
                        item.tags && item.tags.map(( tag,index ) => <Tag key={index}> {tag} </Tag>)
                      }
                    </span>
                  }
                />
                <ArticleListContent data={item} />
              </List.Item>
            )}
          />


          {/* 将生成编辑器 */}
          <div ref="editorElem" style={{textAlign: 'left'}}>
          </div>

        </Card>
      </Fragment>
    );
  }
}

export default SearchList;
